<template>
  <div class="main">
    <h3>一键登录</h3>
    <div class="login">
      <img
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/pszf6cvzf4usrizuwg1juregockepsk5pt52db3940-00e9-42fa-8c19-07c7d85b741a"
        alt=""
      />
    </div>
    <p>193****4563</p>
    <button class="one">本机号码一键登录</button>
    <p class="change" @click="$router.push('/phonelogin')">切换其他登录</p>
    <div class="btn">
      <input type="checkbox" name="" id="" />
      <span @click="show = true"
        >我已阅读并同意 <i>《用户协议》</i>和<i>《隐私政策》</i></span
      >
    </div>
    <!-- 授权弹出框 -->
    <van-popup v-model:show="show" :style="{ height: '40%', width: '80%' }">
      <div class="authorize">
        <h3>用户协议和隐私政策</h3>
        <div class="content">
          欢迎使用xi禧！
          <br />我们将依据《用户协议》和《隐私政策》，帮助您了解我们为你提供的服务，及收集、处理、存储您个人信息的情况以及您帮助您了解我们为你提供的服务，及收集、处理、存储您个人信息的情况以及您享有的相关权利禧”及相关服务时，我们会收集您的设备信息、系统版本、软件列表等信息，用于保障您的正常使用。
          <br />1.
          我们将依据《用户协议》和《隐私政策》，帮助您了解我们为你提供的服务，及收集、处理、存储您个人信息的情况以及您帮助您了解我们为你提供的服务，<br />2.
          及收集、处理、存储您个人信息的情况以及您享有的相关权利禧”及相关服务时，我们会收集您的设备信息、系统版本、软件列表等信息，用于保障您的正常使用。
        </div>
      </div>
      <div class="agree" @click="show = false">
        <button>暂不使用</button>
        <button>同意</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.main {
  .authorize {
    padding: 0.4rem 0.4rem 0 0.4rem;
    height: 80%;
    overflow: auto;
    border-bottom: 1px solid rgb(126, 119, 119);
    h3 {
      margin: 0;
      font-weight: 400;
      width: 100%;
    }
    .content {
      width: 100%;
      text-align: start;
      font-size: 0.28rem;
    }
  }
  .agree {
    width: 100%;
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 0;
    button {
      width: 50%;
      height: 0;
      margin: 0;
      border-radius: 0;
      background-color: white;
      color: black;
      &:last-child {
        color: red;
      }
    }
  }
  text-align: center;
  h3 {
    font-size: 0.36rem;
    margin: 1.14rem 0 0.48rem 0;
  }
  img {
    width: 2.9rem;
    height: 2.9rem;
  }
  p {
    margin: 0.53rem 0 0.3rem 0;
    font-size: 0.36rem;
  }
  button {
    width: 5.4rem;
    height: 0.88rem;
    border-radius: 0.5rem;
    background-color: red;
    color: white;
    border: none;
    font-size: 0.28rem;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      width: 0.3rem;
      height: 0.3rem;
      display: block;
    }
    span {
      font-size: 0.23rem;
      justify-content: center;
      i {
        color: red;
        font-style: none;
      }
    }
  }
}
</style>
